<template>
  <div class="Membershipcard">
    <div class="header-1">
      <div class="header-1-1-1">
        <span class="tit_t">会员信息</span>
      </div>
    </div>
    <!-- <el-form
      :inline="true"
      :model="this.Member"
      style="margin: 20px"
      class="demo-form-inline"
    >
      <div class="inp_box">
        <el-form-item
          label="持卡人"
          style="margin-right: 30px"
          label-width="70px"
        >
          <el-input v-model="customerName" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="卡号" label-width="70px">
          <el-input v-model="customerCard" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="JSJID" label-width="70px">
          <el-input v-model="jsiId" placeholder=""></el-input>
        </el-form-item>
      </div>
    </el-form> -->
    <!-- 乘客信息 -->
    <div class="header-1">
      <div class="header-1-1-1">
        <span class="tit_t">乘客信息</span>
      </div>
    </div>
    <el-table border :data="QueryList" size="mini" :header-cell-style="{
        color: '#fff',
        background: '#6090EC',
        fontSize: '11px',
        fontWeight: 'normal',
      }" style="width: 100%; margin-top: 20px; margin-left: 10px">
      <el-table-column prop="orderItemID" label="编号" width="240">
      </el-table-column>
      <el-table-column prop="guestName" label="乘客姓名" width="80">
      </el-table-column>
      <!-- <el-table-column prop="guestName" label="车票类型" width="80">
      </el-table-column> -->
      <el-table-column prop="idtype" label="证件类型" width="80">
        <template slot-scope="scope">
          <template v-if="scope.row.idtype=='ID_CARD'">身份证</template>
          <template v-if="scope.row.idtype=='MILITARY_ID'">军人证</template>
          <template v-if="scope.row.idtype=='PASSPORT'">护照</template>
          <template v-if="scope.row.idtype=='MTPFHKAMR'">港澳居民来往内地通行证</template>
          <template v-if="scope.row.idtype=='MTPFTR'">台湾居民来往大陆通行证</template>
          <template v-if="scope.row.idtype=='RPFHKMATR'">台湾居民来往大陆通行证</template>
        </template>
      </el-table-column>
      <el-table-column prop="iDNumber" label="证件号">
      </el-table-column>
      <!-- <el-table-column prop="cabin" label="证件有效期" width="80">
      </el-table-column> -->
      <!-- <el-table-column prop="trainNumber" label="车次" width="80">
      </el-table-column>
      <el-table-column prop="guestInformations[0].trainBox" label="车厢号" width="80">
      </el-table-column>
      <el-table-column prop="guestInformations[0].seatNo" label="座位号" width="80">
      </el-table-column>
      <el-table-column prop="guestInformations[0].seatType" label="席别" width="80">
      </el-table-column>
      <el-table-column prop="ticketPrice" label="实际票价" width="80">
      </el-table-column>
      <el-table-column prop="departureStationName" label="发车站" width="80">
      </el-table-column>
      <el-table-column prop="arrivalStationName" label="到达站" width="80">
      </el-table-column> -->

      <!-- <el-table-column prop="departureTime" label="出发时间" width="160">
      </el-table-column>
      <el-table-column prop="arrivalTime" label="到达时间" width="160">
      </el-table-column> -->

      <el-table-column prop="status" label="状态" width="100">
        <template slot-scope="scope">
          <template v-if="scope.row.status == 'unpaid'">未支付</template>
          <template v-if="scope.row.status == 'payments'">支付中</template>
          <template v-if="scope.row.status == 'payd'"> 支付成功</template>
          <template v-if="scope.row.status == 'ticketing'">出票成功</template>
          <template v-if="scope.row.status == 'refundTicketSuccess'">退票成功</template>
          <template v-if="scope.row.status == 'cancelOrder'">取消订单</template>
          <template v-if="scope.row.status == 'changeTicket'">改签中</template>
          <template v-if="scope.row.status == 'changeTicketSuccess'">改签成功</template>
          <template v-if="scope.row.status == 'changeTicketFail'">改签失败</template>
        </template>
      </el-table-column>
    </el-table>
    <!-- 预定信息 -->
    <div class="header-1">
      <div class="header-1-1-1">
        <span class="tit_t">预定信息</span>
      </div>
    </div>
    <div class="table">
      <table>
        <tr>
          <td class="td-1">车次号</td>
          <td class="td-2">{{QueryLists.trainNumber}}</td>
          <td class="td-1">出发地</td>
          <td class="td-2">{{QueryLists.departureStationName}}</td>
          <td class="td-1">到达地</td>
          <td class="td-2">{{QueryLists.arrivalStationName}}</td>
        </tr>
        <tr>
          <td class="td-1">订单号</td>
          <td class="td-2">{{QueryLists.orderNumber}}</td>
          <td class="td-1">出发时间</td>
          <td class="td-2">{{QueryLists.departureTime}}</td>
          <td class="td-1">到达时间</td>
          <td class="td-2">{{QueryLists.arrivalTime}}</td>
        </tr>
        <tr>
          <td class="td-1">乘车日期</td>
          <td class="td-2">{{QueryLists.travelDate}}</td>
          <td class="td-1">订单状态</td>
          <td class="td-2">
            {{QueryLists.status=='ticketing'?'出票成功':QueryLists.status=='unpaid'?'未支付':QueryLists.status=='payments'?'支付中':QueryLists.status=='payd'?'支付成功':QueryLists.status=='refundTicketSuccess'?'退票成功':QueryLists.status=='cancelOrder'?'取消订单':QueryLists.status=='changeTicket'?'改签中':QueryLists.status=='changeTicketSuccess'?'改签成功':QueryLists.status=='changeTicketFail'?'改签失败':''}}
          </td>
          <td class="td-1">坐席</td>
          <td class="td-2">{{QueryLists.seatType=='0' ?'无座' :QueryLists.seatType=='1' ?'硬座' :QueryLists.seatType=='2' ?'软座'
            :QueryLists.seatType=='4' ?'软卧' :QueryLists.seatType=='5' ?'包厢硬卧' :QueryLists.seatType=='6' ?'高级软卧'
            :QueryLists.seatType=='7' ?'一等软卧' :QueryLists.seatType=='8' ?'二等软卧' :QueryLists.seatType=='9' ?'商务座'
            :QueryLists.seatType=='A' ?'高级软卧'  :QueryLists.seatType=='E' ?'特等软卧' :QueryLists.seatType=='F' ?'动卧'
            :QueryLists.seatType=='H' ?'一人软包' :QueryLists.seatType=='I' ?'一等卧' :QueryLists.seatType=='J' ?'二等卧'
            :QueryLists.seatType==' M' ?'一等座' :QueryLists.seatType=='O' ?'二等座' :QueryLists.seatType=='P' ?'特等座'
            :QueryLists.seatType=='Q' ?'多功能座' :''
            }}</td>
        </tr>
        <tr>
          <td class="td-1">票单价</td>
          <td class="td-2">{{QueryLists.ticketPrice}}</td>
          <td class="td-1">总价</td>
          <td class="td-2">{{QueryLists.sumAmount}}</td>
          <td class="td-1">支付价</td>
          <td class="td-2">{{QueryLists.payAmount}}</td>
        </tr>
        <tr>
          <td class="td-1">订单过期时间</td>
          <td class="td-2">{{QueryLists.expiredTime}}</td>
          <td class="td-1">12306取票号</td>
          <td class="td-2">{{QueryLists.order12306Number}}</td>
          <td class="td-1">联系人手机号</td>
          <td class="td-2">{{ QueryLists.linkPhone}}</td>
        </tr>
        <tr>
          <!-- <td class="td-1">占座描述信息</td>
          <td class="td-2">{{QueryLists.msg}}</td> -->
          <td class="td-1">订单类型</td>
          <td class="td-2">{{QueryLists.orderType}}</td>
          <td class="td-1">是否占座成功</td>
          <td class="td-2">{{QueryLists.ordersuccess==false?'否' :'是'}}</td>
          <td class="td-1">历时</td>
          <td class="td-2">{{ QueryLists.runTime}}</td>
        </tr>
        <tr>
          <td class="td-1">订单城建时间</td>
          <td class="td-2">{{QueryLists.createTime}}</td>
          <td class="td-1">12306取票号</td>
          <td class="td-2">{{QueryLists.order12306Number}}</td>
          <td class="td-1">出票渠道</td>
          <td class="td-2">{{ QueryLists.ticketingChannel}}</td>
        </tr>
        <tr>
          <td class="td-1">服务费</td>
          <td class="td-2">{{QueryLists.serviceCharge}}</td>
          <td class="td-1">预定时间</td>
          <td class="td-2">{{QueryLists.scheduledTime}}</td>
          <td class="td-1">预定员</td>
          <td class="td-2">{{ QueryLists.reservation}}</td>
        </tr>
        <tr>
          <td class="td-1">保险费</td>
          <td class="td-2">{{QueryLists.insurance}}</td>
          <td class="td-1">支付方式</td>
          <td class="td-2">{{QueryLists.paymentMethod}}</td>
          <td class="td-1">平台交易号</td>
          <td class="td-2">{{ QueryLists.transactionNum}}</td>
        </tr>
        <tr>
          <td class="td-1">联系人</td>
          <td class="td-2">{{QueryLists.contact}}</td>
        </tr>


      </table>
      <table>
        <tr>
          <td class="td-1">备注</td>
          <td class="td-4"></td>
        </tr>
        <tr>
          <td class="td-1">退票政策</td>
          <td class="td-4" style="padding:10px;">成人退票时，如名下有儿童票，需一同退票！<br />
            票面乘车站开车前48小时以上的，退票时收取票价5%的退票费；<br />
            开车前24小时以上，不足48小时的，退票时收取票价10%的退票费；<br />
            开车前不足24小时的，退票时收取票价20%的退票费。<br />
            如果手续费不足2元的，按照2元收取！<br />

            退票到账时间<br />
            退票成功后，将向您注册时提供的手机号发送退票成功短信，最终退票时间以铁路局实退为准。<br />
            退款到账时间约为3~21天。（15个工作日内，请您耐心等待）<br />
          </td>
        </tr>
      </table>
    </div>
    <!-- 操作信息 -->
    <div class="header-1">
      <div class="header-1-1-1">
        <span class="tit_t">操作信息</span>
      </div>
    </div>
    <div>
      <el-table :header-cell-style="{
          color: '#fff',
          background: '#6090EC',
          fontSize: '11px',
          fontWeight: 'normal',
        }" border style="width: 100%">
        <el-table-column label="操作标题" width="300">
        </el-table-column>
        <el-table-column label="操作人姓名" width="300">
        </el-table-column>
        <el-table-column label="操作时间">
        </el-table-column>
        <el-table-column label="备注"> </el-table-column>
      </el-table>
    </div>
    <el-button class="button" type="success" @click="success">返回</el-button>
  </div>
</template>

<script>
  export default {
    name: "Membershipcard",
    data() {
      return {
        customerId: "",
        id: "",
        orderno: "",
        jsjid: "",
        condition: {},
        customerId: "",
        // 会员信息
        Member: {
          customerName: "",
          customerCard: "",
          jsiId: "",
        },
        // 订单号
        ordernumber: "",
        QueryList: [],
        QueryLists: {},
        // 乘客信息列表
        passengerInformationList: {},
      };
    },

    methods: {

      success() {
        this.$router.go(-1)
      },

      // 订单详情
      getqueryTrainOrder() {
        
        this.$axios
          .getqueryTrainOrder({
            orderNumber: String(this.id),
            customerId: String(this.customerId),
          })
          .then((res) => {
            console.log(res);
            if (res.code == "200") {
              // guestInformations
              this.QueryList = res.data.guestInformations;
              console.log(this.QueryList);
              this.QueryLists = res.data;
              console.log(this.QueryLists);
              console.log(this.QueryLists.status)
              if (this.QueryLists.status == 'waitPay') {
                this.QueryLists.statu = '等待支付'
              }
              if (this.QueryLists.status == 'payd') {
                this.QueryLists.statu = '已支付'
              }
              if (this.QueryLists.status == 'cancelOrder') {
                this.QueryLists.statu = '取消支付'
                console.log(this.QueryLists.statu)
              }
              if (this.QueryLists.status == 'unexecuted') {
                this.QueryLists.statu = '未支付'
              }
              localStorage.setItem("isToken", true);
            }
          });
        
      },
    },

    mounted() {

      this.customerId = this.$route.params.customerId;
      this.id = this.$route.params.id;
      this.getqueryTrainOrder()
    },
  };
</script>
<style scoped>
  /* 顶部 */
  .header-1-1-1 {
    margin: 20px;
    color: black;
    font-weight: bold;
  }

  .button {
    margin-left: 44%;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .table {
    border: 1px solid #f0f2f6;
    width: 100%;
    height: 680px;
  }

  .td-1 {
    width: 150px;
    height: 40px;
    background-color: #faffff;
    border-right: 0.5px solid #bcbec6;
    border-bottom: 0.5px solid #bcbec6;
  }

  .td-2 {
    width: 300px;
    border-right: 0.5px solid #bcbec6;
    border-bottom: 0.5px solid #bcbec6;
  }

  .td-4 {
    width: 800px;
    border-right: 0.5px solid #bcbec6;
    border-bottom: 0.5px solid #bcbec6;
  }
</style>